<template>
  <div class="legal-question-search">
    <!-- title -->
    <div class="legal-question-search__title">证据检索</div>
    <!-- tabs  -->
    <el-tabs v-model="activeName" type="card" @tab-click="tabsClickHandle">
      <el-tab-pane label="复审法律问题" name="recheck">
        <evidence-pane :pane-name="activeName" />
      </el-tab-pane>
      <el-tab-pane label="无效法律问题" name="invalid">
        <evidence-pane :pane-name="activeName" />
      </el-tab-pane>
      <el-tab-pane label="外观法律问题" name="appearance">
        <evidence-pane :pane-name="activeName" />
      </el-tab-pane>
      <el-tab-pane label="司法判决法律问题" name="decision">
        <evidence-pane :pane-name="activeName" />
      </el-tab-pane>
      <!-- DLJ MODIFY START -->
      <EvidencePane v-show="false" ref="MyEvidencePane" />
      <!-- DLJ MODIFY END -->
    </el-tabs>
  </div>
</template>

<script>
import EvidencePane from './evidence-pane.vue'
export default {
  name: 'LegalQuestionSearch',
  components: { EvidencePane },
  data() {
    return {
      activeName: 'recheck'
    }
  },
  methods: {
    tabsClickHandle(tab) {
      console.log(tab.paneName)
      // DLJ MODIFY START
      this.$refs.MyLegalPane.getLawTreeData(tab.paneName)
      this.$refs.MyLegalPane.getImplementationDetailsTree(tab.paneName)
      // DLJ MODIFY END
    }
  }
}
</script>

<style lang="scss" scoped>
.legal-question-search {
  font-family: "PingFang SC",微软雅黑!important;
  width: 1200px;
  margin:auto;
  font-size: 16px;

  &__title {
    font-size: 24px;
    color: #303133;
    font-weight: 700;
    margin: 20px 0;
  }
}
</style>

<style lang="scss">
  .legal-question-search {
    /*  el-*tabs样式 */
    .el-tabs {
      &__header {
        margin: 0;
      }

      &__content {
        background: white;
        border: 1px solid #e4e7ed;
        border-top: none;
        padding: 20px;
      }
    }

    .el-tabs--card>.el-tabs__header .el-tabs__item {
      border: 1px solid #e4e7ed;
      border-radius: 10px 10px 0 0;
      margin-right: 10px;
      font-size: 16px;
      background: #ebeef5;
      color: #2d54b8;
    }

    .el-tabs--card>.el-tabs__header .el-tabs__nav {
      border: none;
    }

    .el-tabs--card>.el-tabs__header .el-tabs__item:first-child {
      border-left: 1px solid #E4E7ED
    }

    .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
      background: white;
      color: #303133;
      border-bottom-color: #fff;
    }

  }
</style>
